<template>
	<!--首页-->
	<div class="container">
		<!-- 头部显示 -->
		<view class="header" :class="[{ newheader: navBarFixed }, { changebf: huifu }]" :style="{ 'background-color': swiper_bgcolor }">
			<!-- 分类 -->
			<view class="header-list">
				<!-- 单击选项 -->
				<scroll-view class="list" scroll-x="true">
					<view class="list-box">
						<view class="list-item" v-for="(item, index) in fls" :key="index" @click="postIndexGoods(item.id, index)">
							<!-- 显示文字切换 -->
							<view class="list-item-top" :class="[{ fangda: index == current }, { newview: navBarFixed }]">{{ item.title }}</view>
							<!-- 显示下面的切换选中状态 -->
							<view class="list-item-bottom" :class="[{ hengxian: index == current }, { newhengxian: navBarFixed }]" style="transition: .3s"></view>
						</view>
					</view>
				</scroll-view>
				<!-- 显示详细 -->
				<view class="icon" :fls="fls" @click="goListPage">
					<image v-if="!navBarFixed" src="/static/index/fenleixuanzhong.png" mode="aspectFit"></image>
					<image v-else src="/static/index/fenleixuanzhong1.png" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 搜索框 -->
			<view class="header-input">
				<image @click="postSearchCourse" class="search" src="/static/index/search.png" mode="aspectFit"></image>
				<input v-model.trim="keyword" class="seader-input" :class="{ newinput: navBarFixed }" type="text" placeholder="请输入搜索内容" />
				<image @click="navigate('message')" v-if="!navBarFixed" src="/static/index/msg.png" mode="aspectFit"></image>
				<image @click="navigate('message')" v-else src="/static/index/msg1.png" mode="aspectFit"></image>
				<view @click="navigate('message')" :class="{ newinfo: navBarFixed }">1</view>
			</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="swiper" :class="[{newheader:navBarFixed},{changebf:huifu}]" :style="{'background-color':swiper_bgcolor}">
			<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="800" circular="true" @change="swiperChange">
				<swiper-item v-for="item in images" :key="item.id">
					<view class="swiper-item">
						<image :src="item.path"></image>
<!-- 						<image :src="item.path" mode="aspectFit"></image> -->
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 图标 -->
		<view class="icons">

			<view class="icons-list">
				<image src="/static/index/daoshi.png" mode="aspectFit"></image>
				<text>个人信息</text>
			</view>
			<view class="icons-list">
				<image src="/static/index/hot.png" mode="aspectFit"></image>
				<text>热门</text>
			</view>
			<view class="icons-list">
				<image src="/static/index/kaoshi.png" mode="aspectFit"></image>
				<text>免费</text>
			</view>
			<view class="icons-list">
				<image src="/static/index/AI_bd.png" mode="aspectFit"></image>
				<text>最新书籍</text>
			</view>
			<view class="icons-list">
				<image src="/static/index/qiandao.png" mode="aspectFit"></image>
				<text>签到</text>
			</view>
			<!-- <view class="icons-list">
				<image src="/static/index/vip.png" mode="aspectFit"></image>
				<text>会员</text>
			</view> -->
		</view>
		
		
		
		<view style="height: 800px; text-align: center;">
			{{ fls[current].title }} 
		</view>
	</div>
</template>

<script>
export default {
	name: 'index',
	data() {
		return {
			keyword: '', // 搜索
			fls: [
				{ id: 0, title: '推荐' },
				{ id: 1, title: '财经' },
				{ id: 2, title: '医疗' },
				{ id: 3, title: '动漫' },
				{ id: 4, title: '连续剧' },
				{ id: 5, title: '少儿' },
				{ id: 6, title: '电影' },
				{ id: 7, title: '记录片' },
			],
			current: 0,
			flid: '' ,// 这个变量用于传值
			navBarFixed: false,
			huifu: false,
			images: [
				{ id: 1001, maincolor: '#00aaff', path: require('../../static/index/beijing.png') },
				{ id: 1002, maincolor: '#0055ff', path: require('../../static/index/jszm.jpg') },
			],
			index: 0,
			swiper_bgcolor: '#4b89ff',
		};
	},

	methods: {
		// 获取首页分类列表信息
		postIndexGoods(id,key) {
			this.current = key
			this.flid = id
		},
		// 去列表页面
		goListPage () {
			uni.showToast({
				title: '切换列表页面',
				icon: 'none'
			});
		},
		/**
		 * @param {Object} :搜索
		 */
		postSearchCourse(e) {
			let keyword
			if(e == 'hot' || e == 'new' || e == 'free' ) {
				keyword = e
			} else {
				keyword = this.keyword
				if(keyword == '') {
					uni.showToast({
						title: '搜索内容不能为空',
						icon: 'none'
					});
					return false
				}
			}
			console.log('掉一下接口哇'+keyword)
			// uni.navigateTo({
			// 	url: `/pages/course-list/course-list?keyword=${keyword}`
			// });
		},
		// 滚动变换颜色
		swiperChange(e){
			this.swiper_bgcolor = this.images[e.detail.current].maincolor
		},
		// 列表消息
		navigate() {
			uni.showToast({
				title: '列表消息显示',
				icon: 'none'
			});
		}
	},
	// 监听页面的滚动，超过30，改变页面顶部的颜色，小于30，变成之前的颜色
	onPageScroll(object){
		let scrollTop = object.scrollTop;
		if (scrollTop > 30) {
			this.navBarFixed = true
			this.huifu = false
		} else {
			this.navBarFixed = false
			this.huifu = true
		}
	
	},
};
</script>

<style scoped lang="less">
	// 颜色变化的过度时间的演变
	.newheader {
		background-color: #fff !important;
		transition: 0.8s;
	}
　　.changebf {
		transition: 0.8s;
	}
.container {
	width: 100%;
	min-height: 100%;
	/* 头部 */
	.header {
		width: 100%;
		height: 200rpx;
		background-color: #4b89ff;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;

		&-list {
			height: 110rpx;
			margin-left: 25rpx;
			display: flex;

			.list {
				width: 580rpx;
				height: 110rpx;
				white-space: nowrap;
				.list-box {
					height: 110rpx;
					display: flex;
					align-items: center;
					/* margin-top: 20rpx; */
					.list-item {
						margin-right: 40rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						.list-item-top {
							font-size: 31rpx;
							color: #fff;
							font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						}
						.fangda {
							font-size: 35rpx;
							font-weight: 700;
							margin-top: 5rpx;
						}
						.newview {
							color: #515151;
						}
						.hengxian {
							width: 32rpx;
							height: 9rpx;
							border-radius: 4.5rpx;
							margin-top: 10rpx;
							background-color: #fff;
						}
						.newhengxian {
							background-color: #4b89ff;
						}
					}
				}
			}
			.icon {
				display: inline-block;
				float: right;
				width: 37rpx;
				height: 37rpx;
				margin: 34rpx 0 0 30rpx;
				image {
					width: 37rpx;
					height: 37rpx;
				}
			}
		}
		&-input {
			display: flex;
			position: relative;
			.search {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 140rpx;
				top: 0;
				z-index: 99;
			}
			input {
				width: 600rpx;
				height: 63rpx;
				background-color: #fff;
				font-size: 26rpx;
				border-radius: 50rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
			}
			.newinput {
				background-color: #ededed;
			}
			image {
				width: 45rpx;
				height: 44rpx;
				margin-left: 40rpx;
				margin-top: 15rpx;
			}
			view {
				width: 29rpx;
				height: 29rpx;
				border-radius: 50%;
				background-color: #ff4141;
				font-size: 17rpx;
				text-align: center;
				line-height: 29rpx;
				color: #fff;
				position: absolute;
				right: 12rpx;
				top: 0;
			}
			.newinfo {
				border: 2rpx solid #fff;
				box-sizing: border-box;
			}
		}
	}
	
	// 轮播图
	.swiper {
		height: 262rpx;
		margin-top: 200rpx;
		background-color: #4b89ff;
		border-bottom: 96rpx solid #efefef;
		box-sizing: border-box;
		swiper {
			width: 709rpx;
			height: 262rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			overflow: hidden;
			swiper-item {
				view {
					width: 100%;
					height: 100%;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
	// 图标
	.icons {
		// height: 395upx;
		padding: 25upx 0;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		&-list {
			flex: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			image {
				width: 115upx;
				height: 115upx;
			}
			text {
				font-size: 24upx;
				font-weight: 700;
			}
		}
	}
}
</style>
